<template>
	<!--组件-->
	<scroll-view scroll-x='false' scroll-with-animation 
		:scroll-into-view=" 'tab-' + scrollIntoView"
		:style="{ background:currentSwiperHeight + 'rpx' }">
		<view class="swiperTab" v-for="(item,index) in swiperTabList" :key='index' 
			:style="{ width:currentSwiperWidth,
			lineHeight:currentSwiperHeight + 'rpx' ,
			margin: swiperMargin,
			}" 
			:id=" 'tab-' + index " @tap="CurrentTab(index,item)">
			<!-- backgroundColor: swiperTabIdx == index ? currentSwiperBgColor : swiperBgColor, -->
			<!--导航标题-->
			<text class="textitem"  :style="{ 
				color:swiperTabIdx == index ? swiperCurrentColor:swiperColor,
				fontSize: swiperTabIdx == index ? swiperCurrentFontSize : swiperFontSize ,
				backgroundColor: swiperTabIdx == index ? currentSwiperBgColor : swiperBgColor,
				borderRadius: swipaerBorderRadius,
				'background-image':swiperBgImage
				}" >
				{{ item }}
			</text>
			<!--导航标题-->
			
			<!--线条-->
			<view class="swiperLine" v-show="currentSwiperLineShow">
				<view class="swiperLineActive" 
					:class="[ swiperTabIdx == index && currentSwiperLineAnimatie ?'currentLine':'' ]"
					:style="{ 
						width:currentSwiperLineActiveWidth,
						height:currentSwiperLineActiveHeight,
						background:currentSwiperLineActiveBg
					}" v-if=" swiperTabIdx == index ">
				</view>
			</view>
			<!--线条-->
			
		</view>
	</scroll-view>
</template>

<script>
	export default{
		data(){
			return{
			}
		},
		onLoad() { },
		props:{
			scrollIntoView:{ type:Number },//设置哪个方向可滚动，则在哪个方向滚动到该元素
			swiperTabList:{ type:Array },//导航列表
			swiperTabIdx:{ type:Number },//导航对应列表下标
			swiperColor:{ type:String },//导航栏字体未选中前颜色
			swiperBgImage: {type: String }, // 渐变颜色
			swiperMargin: {type: String, default: '0px'}, // 外边距
			swipaerBorderRadius: {String, default: 'none'}, // 圆角
			swiperBgColor: { type:String, default: ''  },//导航栏背景未选中前颜色
			swiperFontSize: { type:String, default: '12px' }, // 导航栏字体未选中前大小
			swiperCurrentColor:{ type:String },//选中当前导航栏字体颜色
			swiperCurrentFontSize: { type:String, default: '16px' }, //当前选中导航字体大小
			currentSwiperWidth:{ type:String },//当前导航的宽度
			currentSwiperBgColor:{ type:String, default: '' },//当前导航的背景颜色 
			currentSwiperHeight:{ type:Number },//当前导航的高度度 
			currentSwiperLineShow:{ type:Boolean, default: false },//是否显示线条
			currentSwiperLineActiveWidth:{ type:String },//当前选中的导航栏线条的宽度
			currentSwiperLineActiveHeight:{ type:String },//当前选中的导航栏线条的高度度
			currentSwiperLineActiveBg:{ type:String },//当前选中的导航栏线条颜色
			currentSwiperLineAnimatie:{ type:Number },//当前选中的导航栏线条过渡效果
		},
		methods:{
			
			CurrentTab:function (index,item){
				this.$emit('change',index,item);
			},
			
		}
	}
</script>

<style scoped>
	.swiperHead scroll-view{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		white-space: nowrap;
		font-size: 15px;
	}
	.swiperTab{
		display: inline-flex;
		flex-direction: column;
		text-align: center;
		position: relative;
		min-width: 15%;
/* 		background-image: linear-gradient( 135deg, #5EFCE8 10%, #736EFE 100%); */
	}
	.swiperLine{ position: absolute;bottom: 3upx;left: 0;width: 100%;z-index: 10; }
	.swiperLineActive{ margin: 0 auto;border-radius: 30upx; }
	@keyframes currentLine{ 
		0%{
			transform: scale(0.5);
		} 
		100%{
			transform: scale(1);
		}
	}
	.currentLine{ animation:currentLine 300ms forwards; }
	.textFontsize{font-size: 16px;}
	.textitem {
		padding: 0 10rpx;

	}
</style>
